<template>
    <div class="waitBox">
        <div style="line-height: 50px; border-bottom: 1px solid #ccc;">待办提醒</div>
        <ul>
            <li v-for="(item, index) in tableData" :key="index">
                <div>
                    <div style="font-size: 20px;">
                        {{ item.items }}
                    </div>
                    <div style="font-size: 13px; color: #999999;">
                        {{ item.title }}
                    </div>
                </div>
                <button></button>
            </li>
        </ul>
    </div>
</template>

<script lang='ts' setup>
import { reactive, onMounted } from 'vue'
import api from '@/api'

//创建table数组
const tableData = reactive([
    {
        title: '待审核签约申请',
        items: ''
    },
    {
        title: '待审核服务申请',
        items: ''
    },
    {
        title: '待完成服务',
        items: ''
    },
    {
        title: '待回复消息',
        items: ''
    },
    {
        title: '待处理续约',
        items: ''
    }
])

onMounted(async () => {
    const result = await api.workbench.getWaitDoApi()
    // console.log('wait', result.data.data);

    Object.entries(result.data.data).forEach(([_, value], index) => {
        // 将 value 赋值给对应下标的 tableData 中的 items 属性
        tableData[index].items = value as string;
    })

    // console.log(tableData);
})
</script>

<style lang='scss' scoped>
.waitBox {
    width: 270px;
    height: 455px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
    background-color: white;

    li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        height: 75px;

        &:last-child {
            border-bottom: none;
        }


        button {
            width: 8px;
            height: 8px;
            background-color: red;
            border-radius: 50%;
            border: none;
        }
    }
}
</style>